<template>
  <div class="food-page">
    <div class="page-header">
      <h1>宠物食品专区</h1>
      <div class="filter-tabs">
        <button 
          :class="['tab-btn', selectedPet === 'all' ? 'active' : '']"
          @click="selectedPet = 'all'"
        >
          全部
        </button>
        <button 
          :class="['tab-btn', selectedPet === 'cat' ? 'active' : '']"
          @click="selectedPet = 'cat'"
        >
          猫粮
        </button>
        <button 
          :class="['tab-btn', selectedPet === 'dog' ? 'active' : '']"
          @click="selectedPet = 'dog'"
        >
          狗粮
        </button>
      </div>
    </div>

    <div class="age-filter" v-if="selectedPet !== 'all'">
      <button 
        :class="['filter-btn', selectedAge === 'all' ? 'active' : '']"
        @click="selectedAge = 'all'"
      >
        全部年龄段
      </button>
      <button 
        :class="['filter-btn', selectedAge === 'kitten' || selectedAge === 'puppy' ? 'active' : '']"
        @click="selectedAge = selectedPet === 'cat' ? 'kitten' : 'puppy'"
      >
        {{ selectedPet === 'cat' ? '幼猫' : '幼犬' }}
      </button>
      <button 
        :class="['filter-btn', selectedAge === 'adult' ? 'active' : '']"
        @click="selectedAge = 'adult'"
      >
        成年
      </button>
      <button 
        :class="['filter-btn', selectedAge === 'senior' ? 'active' : '']"
        @click="selectedAge = 'senior'"
      >
        老年
      </button>
    </div>

    <div class="products-grid">
      <div v-for="product in filteredProducts" :key="product.id" class="product-card">
        <div class="product-image">
          <img :src="product.image" :alt="product.name">
          <div class="product-badge">
            {{ getAgeBadgeLabel(product.subCategory) }}
          </div>
        </div>
        <div class="product-info">
          <h3>{{ product.name }}</h3>
          <p class="description">{{ product.description }}</p>
          <div class="price-action">
            <span class="price">¥{{ product.price }}</span>
            <div class="action-buttons">
              <router-link 
                :to="'/product/' + product.id" 
                class="detail-btn"
              >
                查看详情
              </router-link>
              <button 
                class="add-to-cart" 
                @click="addToCart(product)"
                :disabled="!isLoggedIn"
                :title="!isLoggedIn ? '请先登录' : ''"
              >
                加入购物车
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import products from '../products'

export default {
  name: 'Food',
  setup() {
    const selectedPet = ref('all') // 定义选中的宠物类型，默认为全部
    const selectedAge = ref('all')// 定义选中的宠物年龄，默认为全部
    const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true')// 判断用户是否登录
    // 计算过滤后的产品
    const filteredProducts = computed(() => {
      let filtered = products.filter(p => p.productType === 'food')
      
      if (selectedPet.value !== 'all') {
        filtered = filtered.filter(p => p.petType === selectedPet.value)
      }
      
      if (selectedAge.value !== 'all') {
        filtered = filtered.filter(p => p.subCategory === selectedAge.value)
      }
      
      return filtered
    })
    // 获取年龄徽章标签
    const getAgeBadgeLabel = (subCategory) => {
      const labels = {
        'kitten': '幼猫专用',
        'puppy': '幼犬专用',
        'adult': '成年期',
        'senior': '老年期'
      }
      return labels[subCategory] || subCategory
    }
    // 添加商品到购物车的方法
    const addToCart = (product) => {
      if (!isLoggedIn.value) {
        alert('请先登录！')
        return
      }

      const cart = JSON.parse(localStorage.getItem('cart') || '[]')
      const existingItem = cart.find(item => item.id === product.id)
      
      if (existingItem) {
        existingItem.quantity++
      } else {
        cart.push({ ...product, quantity: 1 })
      }
      
      localStorage.setItem('cart', JSON.stringify(cart))
      window.dispatchEvent(new Event('storage'))
      alert('已添加到购物车！')
    }

    return {
      selectedPet,
      selectedAge,
      filteredProducts,
      getAgeBadgeLabel,
      addToCart,
      isLoggedIn
    }
  }
}
</script>

<style scoped>
.food-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2em;
  color: #333;
  margin-bottom: 20px;
}

.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  background: #4CAF50;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.1em;
}

.tab-btn:hover {
  background: #45a049;
}

.tab-btn.active {
  background: #357a38;
}

.age-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.filter-btn {
  padding: 8px 16px;
  border: 2px solid #4CAF50;
  border-radius: 20px;
  background: white;
  color: #4CAF50;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* 筛选按钮悬停时的背景颜色 */
.filter-btn:hover {
  background: #4CAF50;
  color: white;
}

.filter-btn.active {
  background: #4CAF50;
  color: white;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.product-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  height: 240px;
  overflow: hidden;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #4CAF50;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8em;
}

.product-info {
  padding: 20px;
}

.product-info h3 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: #333;
}

.description {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 15px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 1.3em;
  font-weight: bold;
  color: #4CAF50;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.detail-btn {
  background: #B784B7;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  font-size: 14px;
}

.detail-btn:hover {
  background: #9B6B9B;
}

.add-to-cart {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
}

.add-to-cart:hover:not(:disabled) {
  background: #45a049;
}

.add-to-cart:disabled {
  background: #ccc;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }

  .filter-tabs, .age-filter {
    flex-wrap: wrap;
  }

  .tab-btn, .filter-btn {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 120px;
  }
}
</style>